<template>
  <div v-if="mode == 'check'" class="forbid"></div>
  <div class="workflow">
    <div class="fd-nav">
      <div class="fd-nav-left">
        <div class="fd-nav-back" @click="toReturn">
          <i class="anticon anticon-left"></i>
        </div>
        <div class="fd-nav-title">{{ workFlowDef.name }}</div>
      </div>
      <div class="fd-nav-right">
        <el-button @click="getconsole()" class="consolebtn">保存</el-button>
        <button type="button" class="ant-btn button-publish" @click="saveSet">
          <span>发 布</span>
        </button>
      </div>
    </div>
    <div class="fd-nav-content">
      <section class="dingflow-design">
        <div class="zoom">
          <div
            class="zoom-out"
            :class="nowVal == 50 && 'disabled'"
            @click="zoomSize(1)"
          ></div>
          <span>{{ nowVal }}%</span>
          <div
            class="zoom-in"
            :class="nowVal == 150 && 'disabled'"
            @click="zoomSize(2)"
          ></div>
        </div>
        <!-- 画布 -->
        <div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
          <nodeWrap
            v-model:nodeConfig="nodeConfig"
            v-model:flowPermission="flowPermission"
          />
          <!-- 结束节点 -->
          <div class="end-node">
            <div class="node-wrap" v-if="nodeConfig.type === 0">
              <div
                class="node-wrap-box node-wrap-box1-now endpoint"
                :class="'start-node '"
              >
                <!-- 卡片头部 -->
                <!-- 卡片面板 -->
                <div class="content">
                  <div class="text">
                    {{ "结 束" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!-- 
      错误弹框
      [{
          name: 节点名称,
          type: 节点类型 1: "审核人", 2: "抄送人",3:'条件'，4："路由""
        }]
     -->
    <errorDialog v-model:visible="tipVisible" :list="tipList" />
    <!-- 发起人抽屉 设置 -->
    <promoterDrawer @gotest="gotest2" />
    <!-- 审核人抽屉 设置 -->
    <approverDrawer :directorMaxLevel="directorMaxLevel" />
    <!-- 抄送人设置 -->
    <copyerDrawer />
    <!-- 条件设置 -->
    <conditionDrawer />
  </div>
</template>

<script setup>
import errorDialog from "./com/components/dialog/errorDialog.vue";
import promoterDrawer from "./com/components/drawer/promoterDrawer.vue";
import approverDrawer from "./com/components/drawer/approverDrawer.vue";
import copyerDrawer from "./com/components/drawer/copyerDrawer.vue";
import conditionDrawer from "./com/components/drawer/conditionDrawer.vue";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getWorkFlowData, setWorkFlowData } from "./com/plugins/api.js";
import { workFlowStoreHook } from "@/store/modules/workflow";
// import { mapMutations } from "./com/plugins/lib.js";
// let { setTableId, setIsTried } = mapMutations();

let tipList = ref([]);
let tipVisible = ref(false);
let nowVal = ref(100);
let processConfig = ref({});
// 节点
let nodeConfig = ref({});
let workFlowDef = ref({});
// 权限
let flowPermission = ref([]);
let directorMaxLevel = ref(0);
let mode = ref("edit"); //EDIT 编辑模式  check 查看模式

onMounted(async () => {
  let route = useRoute();
  let { data } = await getWorkFlowData({
    workFlowDefId: route.query.workFlowDefId
  });
  processConfig.value = data;
  let {
    nodeConfig: nodes,
    flowPermission: flows,
    directorMaxLevel: directors,
    workFlowDef: works,
    tableId
  } = data;
  nodeConfig.value = nodes;
  flowPermission.value = flows;
  directorMaxLevel.value = directors;
  workFlowDef.value = works;
  workFlowStoreHook().setTableId(tableId);
});
const toReturn = () => {
  //window.location.href = ""
};
//校验
//1: "审核人", 2: "抄送人",3:'条件'，4："路由""
const reErr = ({ childNode }) => {
  if (childNode) {
    let { type, error, nodeName, conditionNodes } = childNode;
    if (type == 1 || type == 2) {
      if (error) {
        tipList.value.push({
          name: nodeName,
          type: { 1: "审核人", 2: "抄送人" }[type]
        });
      }
      reErr(childNode);
    } else if (type == 3) {
      if (!childNode.childNode) {
        tipList.value.push({
          name: `${nodeName}未连接审核人或抄送人`,
          type: "条件"
        });
      }
      reErr(childNode);
    } else if (type == 4) {
      reErr(childNode);
      for (var i = 0; i < conditionNodes.length; i++) {
        if (conditionNodes[i].error) {
          tipList.value.push({
            name: conditionNodes[i].nodeName,
            type: "条件"
          });
        }
        reErr(conditionNodes[i]);
      }
    }
  } else {
    childNode = null;
  }
};
//发布
const saveSet = async () => {
  workFlowStoreHook().setIsTried(true);
  tipList.value = [];
  reErr(nodeConfig.value);
  console.log(tipList.value);
  if (tipList.value.length != 0) {
    tipVisible.value = true;
    return;
  }
  processConfig.value.flowPermission = flowPermission.value;
  // eslint-disable-next-line no-console
  console.log(JSON.stringify(processConfig));
  // let res = await setWorkFlowData(processConfig);
  // if (res.code == 200) {
  //   ElMessage.success("设置成功");
  //   setTimeout(function () {
  //     window.location.href = "";
  //   }, 200);
  // }
};
const zoomSize = type => {
  if (type == 1) {
    if (nowVal.value == 50) {
      return;
    }
    nowVal.value -= 10;
  } else {
    if (nowVal.value == 150) {
      return;
    }
    nowVal.value += 10;
  }
};
const getconsole = () => {
  let savedata = {
    directorMaxLevel: directorMaxLevel.value,
    flowPermission: flowPermission.value,
    nodeConfig: nodeConfig.value,
    workFlowDef: workFlowDef.value,
    tableId: workFlowStoreHook().tableId
  };
  console.log(savedata);
};
const gotest2 = (x, y) => {
  console.log("youlayoula", x, y);
};
</script>
<style>
@import "./com/css/workflow.css";
.workflow {
  position: relative;
  font-size: 14px;
  min-height: 750px;
}

.error-modal-list {
  width: 455px;
}

.endpoint:before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 4px;
  border-style: solid;
  border-width: 8px 6px 4px;
  border-color: #cacaca transparent transparent;
  background: #f5f5f7;
}
.forbid {
  width: 100%;
  height: 100%;
}
</style>
